import React from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import './graphicsTestResult.css';
import returnButtonIcon from '../../asserts/img/graphics-test/return-button.png';

function GraphicsTestResult() {
  const navigate = useNavigate();
  const location = useLocation();
  
  // 从路由状态中获取测试结果数据
  const { correctCount = 0, wrongCount = 0, totalImages = 0, totalRows = 0 } = location.state || {};
  
  const totalAttempts = correctCount + wrongCount;
  const missedRows = Math.max(0, totalRows - (correctCount + wrongCount)); // 漏选的行数 = 总行数 - (正确 + 错误)，确保不为负数
  const accuracy = totalAttempts > 0 
    ? ((correctCount / totalAttempts) * 100).toFixed(1) 
    : 0;

  // 调试信息
  console.log('📊 结果页面统计:', {
    totalRows,
    correctCount,
    wrongCount,
    totalAttempts,
    missedRows,
    accuracy
  });

  // 计算观察力水平百分比（模拟数据）
  const observationLevel = Math.min(99.99, Math.max(0, accuracy * 1.2)).toFixed(2);

  // 计算评分（0-100）- 基于正确率
  const score = totalAttempts > 0 ? Math.round((correctCount / totalAttempts) * 100) : 0;

  // 根据评分确定等级
  const getScoreLevel = (score) => {
    if (score >= 80) return '优秀';
    if (score >= 60) return '良好';
    if (score >= 40) return '一般';
    return '待提高';
  };

  const handleConfirm = () => {
    navigate('/graphics-test');
  };

  return (
    <div className="graphics-test-result-page">
      {/* 顶部导航 */}
      <div className="result-header">
        <button 
          onClick={handleConfirm}
          className="return-button"
          style={{ backgroundImage: `url(${returnButtonIcon})` }}
          title="返回"
        >
        </button>
        <h1 className="result-title"></h1>
        <div className="header-spacer"></div>
      </div>

      {/* 结果内容 */}
      <div className="result-container">
        <div className="result-card">
          {/* 观察力水平标题 */}
          <div className="observation-level-header">
            您的观察力水平: 超过了{observationLevel}%的用户
          </div>

          {/* 主要内容区域 */}
          <div className="main-result-content">
            {/* 左侧：评分和等级 */}
            <div className="score-section">
              <div className="score-hexagon">
                <span className="score-number">{score}</span>
              </div>
              <div className="score-level-badge">
                {getScoreLevel(score)}
              </div>
            </div>

            {/* 右侧：统计图表 */}
            <div className="stats-section">
              {/* 正确 */}
              <div className="stat-bar-item">
                <div className="stat-bar correct-bar" style={{ width: `${(correctCount / Math.max(totalRows, 1)) * 100}%` }}>
                  <span className="stat-label">正确</span>
                </div>
                <span className="stat-value">{correctCount}</span>
              </div>

              {/* 错误 */}
              <div className="stat-bar-item">
                <div className="stat-bar wrong-bar" style={{ width: `${(wrongCount / Math.max(totalRows, 1)) * 100}%` }}>
                  <span className="stat-label">错误</span>
                </div>
                <span className="stat-value">{wrongCount}</span>
              </div>

              {/* 漏选 */}
              <div className="stat-bar-item">
                <div className="stat-bar missed-bar" style={{ width: `${(missedRows / Math.max(totalRows, 1)) * 100}%` }}>
                  <span className="stat-label">漏选</span>
                </div>
                <span className="stat-value">{missedRows}</span>
              </div>
            </div>
          </div>

          {/* 详细统计 */}
          <div className="detailed-stats">
            <div className="detailed-stat-item">
              <span className="detailed-label">正确个数:</span>
              <span className="detailed-value">{correctCount}</span>
            </div>
            <div className="detailed-stat-item">
              <span className="detailed-label">错误次数:</span>
              <span className="detailed-value">{wrongCount}</span>
            </div>
            <div className="detailed-stat-item">
              <span className="detailed-label">漏选次数:</span>
              <span className="detailed-value">{missedRows}</span>
            </div>
          </div>
        </div>

        {/* 确认按钮 */}
        <button onClick={handleConfirm} className="confirm-button">
          确定
        </button>
      </div>
    </div>
  );
}

export default GraphicsTestResult;